<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
      <script>
             
            // 数组的声明方式
            // 字面量方式:
            // 这个方法也是我们最常用的，在初始化数组的时候 相当方便
            //       var a = [3, 11, 8]; // [3,11,8];
            //       console.log(a);
            // 构造器:
            // 实际上 new Array === Array,加不加new 一点影响都没有。
            //       var a = Array(); // []
            //       console.log(a);
            //       var a = Array(3); // [,,]
            //       console.log(a);
            //       var a = Array(3, 11, 8); // [ 3,11,8 ]
            //       console.log(a);

            // of方法
            // 是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异
            //       var a = Array.of(3, 11, 8); // [3,11,8]
            //       console.log(a);
            //       var a = Array.of(3); // [3]
            //       console.log(a);

            // from方法:从一个类似数组或可迭代对象（内部有Symbol.iterator迭代器）创建一个新的，
            //          浅拷贝的数组实例并返回。
            /** 第一个参数(必需):要转化为真正数组的对象。
               第二个参数(可选): 对每个元素进行处理，将处理后的值放入返回的数组。
               第三个参数(可选): 用来绑定this。
          */
            //   let obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
            //   let arr = Array.from(obj); // ['a','b','c'];
            //   console.log(arr);
            //     let arrayLike = {
            //         name: 'tom',
            //         age: '65',
            //         sex: '男',
            //         friends: ['jane', 'john', 'Mary'],
            //         'length': 4,
            //     };
            //     let arr = Array.from(arrayLike);
            //     console.log(arr); // [ undefined, undefined, undefined, undefined ]

            //    function doSomething() {
            //        var args = Array.from(arguments);
            //        console.log(args);
            //    }
            //    doSomething('a', 'b'); //["a","b"]

            //     改变原数组的方法
            //     ES5:
            //     a.splice()/ a.sort() / a.pop()/ a.shift()/  a.push()/ a.unshift()/ a.reverse()
            //     ES6:
            //     a.copyWithin() / a.fill

            // splice方法:添加/删除数组元素
            /**
             * 参数:
               index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
               howmany：可选。要删除的项目数量。如果设置为 0，则不会删除项目。
               item1, ..., itemX： 可选。向数组添加的新项目。
             */
            // 删除元素
            //  var a = [1, 2, 3, 4, 5, 6, 7];
            //  var item = a.splice(0, 3);// 从数组下标0开始，删除3个元素
            //  console.log(item) // [1,2,3]
            //  console.log(a); // [4,5,6,7]

            // var a = [1, 2, 3, 4, 5, 6, 7];
            // var item = a.splice(-1, 3); // [7]// 从最后一个元素开始删除3个元素，因为最后一个元素，所以只删除了7
            // console.log(item);

            // 删除并添加
            //      var a = [1, 2, 3, 4, 5, 6, 7];
            //      var item = a.splice(0, 3, '添加'); // [1,2,3]
            //      console.log(a); // ['添加',4,5,6,7]
            // 从数组下标0开始，删除3个元素，并添加元素'添加'
            //       var b = [1, 2, 3, 4, 5, 6, 7];
            //       var item = b.splice(-2, 3, '添加1', '添加2'); // [6,7]
            //       console.log(b); // [1,2,3,4,5,'添加1','添加2']
            // 从数组最后第二个元素开始，删除3个元素，并添加两个元素'添加1'、'添加2'

            // 不删除只添加
            //    var a = [1, 2, 3, 4, 5, 6, 7];
            //    var item = a.splice(0, 0, '添加1', '添加2'); // [] 没有删除元素，返回空数组
            //    console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]
            //    var b = [1, 2, 3, 4, 5, 6, 7];
            //    var item = b.splice(-1, 0, '添加1', '添加2'); // [] 没有删除元素，返回空数组
            //    console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素

            //sort():对数组元素进行排序，并返回这个数组。
            // 将元素转化为字符串的Unicode(万国码)位点，然后再比较字符
           // var a = [10, 1, 3, 20, 25, 8];
            //  console.log(a.sort()); // [1,10,20,25,3,8];
            // 升序 a-b < 0   a将排到b的前面，按照a的大小来排序的
            //  console.log(
                //  a.sort((a, b) => {
                    //  return b-a;
                //  })
            //  ); //[1, 3, 8, 10, 20, 25]

            // pop():删除一个数组中的最后的一个元素  出栈
            //    var a = [1, 2, 3];
            //    var item = a.pop(); // 3
            //    console.log(a); // [1,2]
            // push() 向数组的末尾添加元素   入栈
            //    var a = [1, 2, 3];
            //    var item = a.push('末尾'); // 4
            //    console.log(a); // [1,2,3,'末尾']

            // shift() 删除数组的第一个元素
            //  var a = [1, 2, 3];
            //  var item = a.shift(); // 1
            //  console.log(a); // [2,3]
            // unshift()向数组的开头添加一个或更多元素，并返回新的长度。
            //  var a = [1, 2, 3];
            //  var item = a.unshift('开头'); // 4
            //  console.log(a); // ['开头',1,2,3]

            //reverse() 颠倒数组中元素的顺序
            // let a = [1, 2, 3];
            // a.reverse();
            // console.log(a); // [3,2,1]

            // copyWithin() 指定位置的成员复制到其他位置
            /**
             * target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
               start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
               end（可选）：到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。
             * 
             */
            // -2相当于3号位，-1相当于4号位
            //   [1, 2, 3, 4, 5].copyWithin(0, -2, -1);
            // [4, 2, 3, 4, 5]
            //  var a = ['a', 'b', 'c', 'd', 'e', 'f'];
            // 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换
            // a.copyWithin(2, 3, 5);
            // console.log(a);
            //  ['a', 'b', 'd', 'e', 'e', 'f']

            // fill() 使用给定值，填充一个数组。
            /**
             * 第一个元素(必须): 要填充数组的值
               第二个元素(可选): 填充的开始位置,默认值为0
               第三个元素(可选)：填充的结束位置，默认是为this.length
             */
            //    ['a', 'b', 'c'].fill(7);
            // [7, 7, 7]
            //    ['a', 'b', 'c'].fill(7, 1, 2);
            // ['a', 7, 'c']

            //  不改变原数组的方法
            /**
             * ES5：
               slice、join、toLocateString、toStrigin、concat、indexOf、lastIndexOf、
               ES7：
               includes
             */
            // slice() 浅拷贝数组的元素
                //  var a = ['hello', 'world'];
                //  var b = a.slice(); // ['hello']
                //  a[0] = '改变原数组';
                //  console.log(a, b); // ['改变原数组','world'] ['hello']
            // 元素是简单数据类型，改变之后不会互相干扰。
            //    b[0] = '改变拷贝的数组';
            //    console.log(a, b); // ['改变原数组','world'] ['改变拷贝的数组']

            // 复杂数据类型(对象,数组)的话，改变其中一个，另外一个也会改变。
                //  var a = [{ name: 'OBKoro1' }];
                //  var b = a.slice();
                //  console.log(b, a); // [{"name":"OBKoro1"}]  [{"name":"OBKoro1"}]
              // a[0].name = '改变原数组';
              // console.log(b, a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]

            // join() 数组转字符串
            //     let a = ['hello', 'world'];
            //     let str = a.join();
            //     console.log(str);// 'hello,world'
            //     let str2 = a.join('+');
            //     console.log(str2);// 'hello+world'

            // concat()方法用于合并两个或多个数组，返回一个新数组。
           // var a = [1, 45, 4, 79, 97];
           // var b = [9, 48, 4, 84, 8, 65, 15, 23];
           // var c = a.concat(b);
           //a.push(b);
           // console.log(c);
           // console.log(a);

            // indexOf() 查找数组是否存在某个元素，返回下标
            /**
             *数组的indexOf搜索跟字符串的indexOf不一样,
              数组的indexOf使用严格相等===搜索元素，即数组元素要完全匹配才能搜索成功。
              indexOf()不能识别NaN 
             */
            // let a = ['啦啦', 2, 4, 24, NaN];
            // console.log(a.indexOf('啦')); // -1
            // console.log(a.indexOf('NaN')); // -1
            // console.log(a.indexOf('啦啦')); // 0

            // lastIndexOf() 查找指定元素在数组中的最后一个位置
            //   let a = ['OB', 4, 'Koro1', 1, 2, 'Koro1', 3, 4, 5, 'Koro1']; // 数组长度为10
            // let b=a.lastIndexOf('Koro1',4); // 从下标4开始往前找 返回下标2
            // let b=a.lastIndexOf('Koro1',100); //  大于或数组的长度 查找整个数组 返回9
            // let b=a.lastIndexOf('Koro1',-11); // -1 数组不会被查找
            //  let b = a.lastIndexOf('Koro1', -9); // 从第二个元素4往前查找，没有找到 返回-1

            //  includes() 查找数组是否包含某个元素 返回布尔
            //  var a = ['OB', 'Koro1', 1, NaN];
            // var b=a.includes(NaN); 
            // console.log(b);// true 识别NaN
            // var b=a.includes('Koro1',100); // false 超过数组长度 不搜索
            // var b=a.includes('Koro1',-3);  // true 从倒数第三个元素开始搜索
            // var b=a.includes('Koro1',-100);  // true 负值绝对值超过数组长度，搜索整个数组

            // 遍历方法(12个)
            //  ES5：
            //  forEach、every 、some、 filter、map、reduce、reduceRight、
            //  ES6：
            //  find、findIndex、keys、values、entries

            //forEach:按升序为数组中含有效值的每一项执行一次回调函数。
            //  let a = [1, 2, 3];
            //  let result = a.forEach((value, index, array) => {
            //      console.log(value);//值
            //      console.log(index);//索引
            //      console.log(array);//原数组
            //  });

            // every 检测数组所有元素是否都符合判断条件,有一个元素不满足，则整个表达式返回 false
            //    var a = [1, 2, 3];
            //    console.log(
            //        a.every((value, index, array) => {
            //            return value >= 1;
            //        })
            //    );
            // some 数组中的是否有满足判断条件的元素,有一个元素满足条件，则表达式返回true,
            //   var a = [1, 2, 3];
            //   console.log(
            //       a.some((value, index, array) => {
            //           return value >= 4;
            //       })
            //   );

            // filter 过滤原始数组，返回新数组
            //  let a = [32, 33, 16, 40];
            //  let result = a.filter(function (value, index, array) {
                //  return value >= 18; // 返回a数组中所有大于18的元素
            //  });
            //  console.log(result, a); // [32,33,40] [32,33,16,40]

            // map 对数组中的每个元素进行处理，返回新的数组
            //  let a = ['1', '2', '3', '4'];
            //  let result = a.map(function (value, index, array) {
            //      return value + '新数组的新元素';
            //  });
            //  console.log(result, a);
            // ["1新数组的新元素","2新数组的新元素","3新数组的新元素","4新数组的新元素"] ["1","2","3","4"]

            // reduce 为数组提供累加器，合并为一个值
            // reduceRight 从右至左累加
            //  1. callback(init,currentValue,index,arr)
            //     1. init(必须)，初始值, 或者上一次调用回调返回的值
            //     2. currentValue(必须),数组当前元素的值
            //     3. index(可选), 当前元素的索引值
            //     4. arr(可选),数组对象本身
            //  2. intaValue：callback函数的第一个参数，若没有提供则为数组第一个值，index从第二个值开始
            // 数组求和
              //  let sum = [0, 1, 2, 3].reduce(function (a, b) {
              //      return a + b;
              //  });
              //  console.log(sum);
            // 6
            // 将二维数组转化为一维 将数组元素展开
            //   let flattened = [
            //       [0, 1],
            //       [2, 3],
            //       [4, 5],
            //   ].reduce((a, b) => a.concat(b), []);
            // [0, 1, 2, 3, 4, 5]

            // find
         //   var a = [1, 4, -5, 10].find(n => n < 0); 
         //   console.log(a);// 返回元素-5
         //   var b = [1, 4, -5, 10, NaN].find(n => Object.is(NaN, n)); 
         //   console.log(b);// 返回元素-5// 返回元素NaN
            // findIndex
          //  var a = [1, 4, -5, 10].findIndex(n => n < 0); 
          //  console.log(a);// 返回元素-5// 返回索引2
          //  var b = [1, 4, -5, 10, NaN].findIndex(n => Object.is(NaN, n)); 
          //  console.log(b);// 返回元素-5// 返回索引4
        </script>
    </body>
</html>
